//- 先去这个pug文件中找
extends shopHead_nav.pug

block append pageStyle
	link(href="${relativePath}/static/css/shopping/shopIndex.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/madeProcess.css" rel="stylesheet" type="text/css")

block matrialContent
	//- 成品材料内容
	div.madeProcessCon.layout
		p.allKinds
			a.index(href="javascript:;") 首页 > 
			a.oneJ(href="../shopping/materFinished.html")  
			a.twoJ(href="javascript:;") 
			a.threeJ(href="javascript:;") 
		//- 淘宝详情
		div.detailsBox
			//- 淘宝图片
			div.detailsLeft.fl
				div.imgsBox
					//- 详情轮播
					div.con-FangDa#bigBox
						div.con-fangDaIMg
							img.first(src="")
							//- 滑块
							div.magnifyingBegin
							div.magnifyingShow
								img.two(src="")
						div.botSwiper
							ul.con-FangDa-ImgList
						
					div.shareBox
						span.xIcon.share 分享
							div.jiathis_style.shareWebBox
								a(href="javascript:;").jiathis_button_tsina
								a(href="javascript:;").jiathis_button_tqq
								a(href="javascript:;").jiathis_button_weixin
								a(href="http://www.jiathis.com/share" target="_blank").jiathis.jiathis_txt.jtico.jtico_jiathis
						div.scGood
						
			div.detailsRight.fl
				div.rightContent
					h3
					div.buyBox
						div.comment
							div.realPrice.fl
								i ￥
								span
								em /㎡
							div.commentCount.fr
								span.comments
									| 评价：<i></i>
								span.sales
					//- 规格
					div.specification
						div.ggBox
							//- div.speciList.;hasBorder
							//- 	span.specTitle.fl 材质
							//- 	ul
							//- 		li.selected
							//- 			a(href="javascript:;") 黄铜板
							//- 		li 紫铜板
							
						div.speciList
							span.specTitle.fl 数量
							ul
								li.noPad
									span.reduce -
									input(type="text" maxlength="8" name="number" value="1").number
									span.add +
						div.speciList.gys
							span.specTitle.fl 供应商
							//- ul.selectList
							//- 	li.arrowBg(data-val="")
							//- 		| 河南省标识汇网络有限公司
							//- 		| <span class="fr">￥750.00</span>
							div.select
								div.text.arrowBg 请选择
								
								ul.selectList
									
					div.buyBtn
						a(href="javascript:;" onclick="buy();").toBuy  立刻购买
						a(href="javascript:;" onclick="buy1();").addCar  加入购物车
					input(type="hidden" name="select" value="")
		//- tab切换
		div.commentBtm
			div.detailsTab
				ul
					li.current
						a(href="javascript:;") 商品详情
					li
						a(href="javascript:;") 买家评价
			div.shopBox
				//- 商品详情1
				div.box.shopDatials
					div.littleTitle
						h4 商品详情
					div.bgLine
					p.shopProcuce

				//- 买家评价
				div.box.buyComments
					//- div.ranking
					//- h5 供应商综合排名：
					//- div.scoreBox
					//- p.companyName
					//- 	a(href="javascript:;") 河南省标识汇商务公司
					//- 	input.goods(type="hidden")
					div.ranking
						h5 供应商综合排名：
						div.scoreBox
					//- 筛选
					div.allComment.allCommentOne
						ul.plNav
							li.current.allPj
							li.imgPj
							li.goodPj
								a(href="javasctipt:;")
							li.centerPj
								a(href="javasctipt:;")
							li.badPj
								a(href="javasctipt:;")
						div.allComment
							div.commentList
								//- div.plCon
								//- 	div.leftHead.fl
								//- 		img(src="${relativePath}/static/imgs/headImg.png")
								//- 	div.textRight.fl
								//- 		p.businessInfo
								//- 			a.buyInfo.fl(href="javasctipt:;") 上帝买家
								//- 			span.commentDate.fr 2017-08-10
								//- 			a.busName.fr(href="javascript:;") 河南省标识汇
								//- 		p.detailTxt 质量非常好，与卖家描述的完全一致，非常满意,真的很喜欢，完全超出期望值，发货速度非常快，包装非常仔细、严实，物流公司服务态度很好，运送速度很快，很满意的一次购物。

								//- //- 评论有图片显示
								//- div.busImgBox
								//- 	ul
								//- 		li
								//- 			img(src="${relativePath}/static/imgs/headImg.png" data="${relativePath}/static/imgs/headImg.png")
								//- 		li
								//- 			img(src="${relativePath}/static/imgs/headImg.png" data="${relativePath}/static/imgs/foot-BG-01.png")
								//- 	div.bigImg
										
								//- 		a(href="javascript:;")
								//- 			img(src="${relativePath}/static/imgs/foot-BG-01.png")

								//- //- 商家回复
								//- div.businessReply
								//- 	div.replyTxt 商家回复：感谢您对我们商品的支持！成交不是结束，而是服务的开始！祝您健康、幸福^_^
	//- 可选规格模板
	script#ggBigBox(type="text/html")
		| {{each ggList arr index}}
		div.speciList.hasBorder
			span.specTitle.fl {{arr.spec_name}}
			ul
				| {{set specifications = arr.specifications}}
				| {{each specifications temp index_l}}
				| <li {{if temp.is_check == 1}}class="selected"{{/if}} specId="{{temp.opt_id}}">
				| <a href="javascript:;">{{temp.opt_name}}</a>
				| </li>
				| {{/each}}
		| {{/each}}
	//- 下拉供应商列表
	script#select(type="text/html")
		| {{each suppliers current}}
		li(data-val="{{current.company_id}}" supperName="{{current.company_name}}")
			| <span class="companyName" company_id={{current.company_id}}>{{current.company_name}}</span>
			| <span class="fr sale_price">{{current.self_price}}</span>
		| {{/each}}

	//- 评论列表
	script#community(type="text/html")
		div.plCon
			div.leftHead.fl
				img(src="{{avatar_img}}")
			div.textRight.fl
				p.businessInfo
					a.buyInfo.fl(href="javasctipt:;") {{member_name}}
					span.commentDate.fr {{comment_time}}
					a.busName.fr(href="javascript:;") {{company_name}}
				p.detailTxt {{contents}}

		//- 评论有图片显示
		| {{if imgs != ""}}
		div.busImgBox
			ul
				| {{each imgs img}}
				li
					| <img data="{{img}}" src="{{img}}" />
				| {{/each}}
			div.bigImg
		| {{/if}}

		//- 商家回复
		| {{if recontents != ''}}
		div.businessReply
			div.replyTxt 商家回复：{{recontents}}
		| {{/if}}
	//- 评论带图片
	

block append pageScript
	script(src="http://v3.jiathis.com/code/jia.js" charset="utf-8" type="text/javascript")
	script(src="${relativePath}/static/js/shopping/jquery.colorbox-min.js" type="text/javascript")
	script(src="${relativePath}/static/js/shopping/zzsc.js" type="text/javascript")
	script(type="text/javascript" src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js")

	script.
		var ggList;
		
		$(function(){
			
			$("#cpcl").addClass("active");
			$(".left span").click(function(){
				$(this).addClass("current").siblings().removeClass("current");
			})
			//- 链接跳转
			$("#index").click(function(){
				window.location.href='materIndex.html';
			});
			$("#dzjg").click(function(){
				window.location.href='dzjG.html';
			});
			$("#cpcl").click(function(){
				window.location.href='materFinished.html';
			});

			//- 点击商品收藏
			$(".shareBox").on("click", ".collect",function(){
				if($(this).hasClass("selected")) {
					$(this).removeClass('selected');
					$(this).text("收藏");
					$.get(shopIp+"/Collection/collectionGoods?userToken="+token+"&goods_id="+thisRequest.id,function(data) {
						layer.msg(data.msg);
					})
				}else{
					$(this).addClass('selected');
					$(this).text("已收藏");
					$.get(shopIp+"/Collection/collectionGoods?userToken="+token+"&goods_id="+thisRequest.id,function(data) {
						layer.msg(data.msg);
					})
				}
			})
			//- tab切换
			$(".detailsTab li").click(function(){
				$(this).addClass("current").siblings().removeClass("current");
				$(".shopBox .box").hide().eq($('.detailsTab li').index(this)).show(); 
			})

			//- 鼠标经过分享显示
			$(".shareBox .share").mouseover(function(){
				$(".shareWebBox").show();
			})
			$(".shareBox .share").mouseleave(function(){
				$(".shareWebBox").hide();
			})
			
			//- 点击数量++/--
			//点击加号
			$(".add").click(function(){
				var num = parseInt($(".number").val()) || 0;
				$(".number").val(num + 1);
			})

			//点击减号
			$(".reduce").click(function(){
				var num = parseInt($(".number").val()) || 0;
				num = num - 1;
				num = num < 1 ? 1 : num;
				$(".number").val(num);
			})

			//- 筛选
			selectSpec();

			//- 点击规格筛选
			$(".ggBox").on("click","li",function(){
				if($(this).is(".disabled") || $(this).is(".selected")) {
					return;
				}
				$(this).addClass("selected").siblings().removeClass("selected");
				selectSpec();
			});
			//- 筛选结束

			//点击供应商下拉选择
			$(".select").click(function() {
				$(this).find("ul").show();
				return false;
			}).on("click","li",function(){
				$(this).closest("ul").hide().closest(".select").find(".text").html($(this).html()).closest(".select").find("input:hidden").val($(this).attr("data-val"));
				return false;
			})
			$(document).click(function() {
				$(".select ul").hide();
			});
			
			// 评论列表
			$.getJSON(shopIp+"/Goods/goods_appraise?callback=?",{
				userToken:token,
				goods_id:thisRequest.id,
				os:"web"
			},function(data){
				var communityData = data.data;
				var merge = communityData.merge;
				var rank = communityData.percentage;
				//console.log(merge);
				//- 所有评论
				$(".allPj").append("全部（"+merge.total+"）");
				$(".imgPj").append("图片（"+merge.imgsTotal+"）");
				$(".goodPj").append("好评（"+merge.lovePoint+"）");
				$(".centerPj").append("中评（"+merge.centrePoint+"）");
				$(".badPj").append("差评（"+merge.wrongPoint+"）");
				if(communityData.comment == null) {
					$(".commentList").html("<img class='imgBig' src='${relativePath}/static/imgs/zw.png'/>");
					$(".commentList").css("text-align","center");
				} else{
					for(var i=0;i<communityData.comment.length;i++){
						var comment = communityData.comment[i];
						var comPic = comment.imgs;
						var communityHtml = template("community",comment);
						$(".commentList").append(communityHtml);
					}
				}
				//- 供应商排名
				if(rank == null) {
					$(".ranking").hide();
					$(".plNav").css("margin-top","20px");
				}else{
					for(var i=0;i<rank.length;i++) {
						var ele = '<div class="circleBox"><div class="circle" per="'+rank[i].percentage+'"><i class="icon">'+rank[i].percentage+'分</i></div><a href="javascript:;">'+rank[i].company_name+'</a></div>';
						$(".scoreBox").append(ele);
					}
				}
				$(".circle").each(function(){
					if($(this).attr("per") == "5.0") {
						//- 圆形评分
						$(this).circleProgress({
							animation:true, //是否显示动画
							value: 1, //进度
							size: 58, //圆大小
							fill: "#ffc100" //填充
						});
					}else if("3.1"< $(this).attr("per") <= "4.0"){
						$(this).circleProgress({
							animation:true, //是否显示动画
							value: 0.85, //进度
							size: 58, //圆大小
							fill: "#ffc100" //填充
						});
					}else if("2.1"< $(this).attr("per") <= "3.0"){
						$(this).circleProgress({
							animation:true, //是否显示动画
							value: 0.65, //进度
							size: 58, //圆大小
							fill: "#ffc100" //填充
						});
					}else if("1.0"<$(this).attr("per") <= "2.0"){
						$(this).circleProgress({
							animation:true, //是否显示动画
							value: 0.45, //进度
							size: 58, //圆大小
							fill: "#ffc100" //填充
						});
					}else if($(this).attr("per") == "1.0"){
						$(this).circleProgress({
							animation:true, //是否显示动画
							value: 0.25, //进度
							size: 58, //圆大小s
							fill: "#ffc100" //填充
						});
					}else if($(this).attr("per") == "0.0"){
						$(this).circleProgress({
							animation:true, //是否显示动画
							value: 0, //进度
							size: 58, //圆大小
							fill: "#ffc100" //填充
						});
					}
				})
				
				//- 点击小图显示大图
				$(".busImgBox").on("click", "li", function() {
					var attr = $(this).find("img").attr("data");
					var picEle = "<a href='javascript:;'><img src='"+attr+"'></a>";
					$(this).closest("ul").next(".bigImg").html(picEle);
				})

				//- 鼠标点击图片放大效果
				$(".busImgBox").on("click","li",function(){
					$(this).addClass("current").siblings().removeClass("current");
				})
			})
		});

		//去重复
		Array.prototype.unique = function() {
		    this.sort();
		    var re=[this[0]];
		    for(var i = 1; i < this.length; i++) {
		        if( this[i] !== re[re.length-1]) {
		            re.push(this[i]);
		        }
		    }
		    return re;
		}

		// 交集
		Array.prototype.intersect = function(b) { 
		    var result = [];
		    var a = this;
		    for(var i = 0; i < b.length; i ++) {
		        var temp = b[i];
		        for(var j = 0; j < a.length; j ++) {
		            if(temp === a[j]) {
		                result.push(temp);
		                break;
		            }
		        }
		    }
		    return result.unique();
		}

		// 选择规格属性
		function selectSpec() {
			// 选中的规格ID数组
			var specidArr = [];
			$("li[specid].selected").each(function() {
				specidArr.push($(this).attr("specid"));
				//console.log(specidArr)
			});
			$.getJSON(shopIp+"/Goods/info?callback=?", {
				userToken:token,
				goods_id:thisRequest.id,
				opt_id:specidArr.join(","),
				os:"web"
			},function(data){
				if(data.status!=200) {
					//alert(data.msg);
					return;
				}
				//console.log(data);
				var allData = data.data;
				//- 规格列表
				ggList = allData.sku_selected_list;
				//- 是否收藏
				var collect = allData.is_collect;
				//- 放大镜图片
				var bigPic = allData.goods_imgs;
				//- 供应商下拉
				var suppliers = allData.suppliers;
				//- 商品详情
				var details = allData.content;
				//二级导航按钮
				var twoNav = allData.top_cate_name;
				//- 筛选开始
				var res = data.data.all_skuid;
				var resObj = Object.keys(res);
				var resVal = Object.values(res);
				
				
				$(".oneJ").html(twoNav[0]+ ' > ');
				$(".twoJ").html(twoNav[1]+ ' > ' );
				$(".twoJ").click(function() {
					window.location.href = '../shopping/materFinished.html'
				})
				$(".threeJ").html(twoNav[2]);
				var goodId = allData.goods_id;
				var skuId = allData.sku_id;
				$(".goods").attr("good_id",goodId);
				$(".rightContent h3").attr("sku_id",skuId);
				//- 是否收藏
				if(collect == 0){
					var ele = "<span class='xIcon collect'>收藏</span>";
					$(".scGood").html(ele);
				}else{
					var ele = "<span class='xIcon collect selected'>已收藏</span>";
					$(".scGood").html(ele);
				}

				//- 放大镜图片
				for(var i=0;i<bigPic.length;i++) {
					var liPic = '<li><img src="'+bigPic[i]+'" data-bigimg="'+bigPic[i]+'">'+'</li>';
					$(".con-fangDaIMg .first").attr("src",bigPic[0]);
					$(".magnifyingShow .two").attr("src",bigPic[0]);
					//console.log(liPic);
					$(".con-FangDa-ImgList").html(liPic);
					$("#bigBox").magnifying();
				}
				
				//- 右侧规格
				//标题
				$(".rightContent h3").html(allData.goods_name);
				//评价
				$(".realPrice span").html(allData.sell_price);
				$(".comments i").html(allData.comment_num);
				$(".sales").html("累计销量："+allData.sale);
				//- 商品详情
				if(details == "") {
					$(".shopProcuce").html("<img class='imgBig' src='${relativePath}/static/imgs/zw.png'/>");
					$(".shopProcuce").css("text-align","center");
				}else{
					$(".shopProcuce").append(escape2Html(details));
				}
				//- 规格参数
				$(".ggBox").html(template("ggBigBox",{ggList:ggList}));

				// 禁用不可选规格
				var allSpecEles = $(".ggBox li");
				allSpecEles.not(".selected").addClass("disabled");
				var selectableEles = {};
				var selectedSize = allSpecEles.filter(".selected").each(function() {
					var specid = $(this).attr("specid");
					$.each(res[specid], function(i, spec) {
						if(selectableEles[spec]) {
							selectableEles[spec] += 1;
						} else {
							selectableEles[spec] = 1;
						}
					});
				}).length - 1;
				$.each(selectableEles, function(spec, times) {
					if(times == selectedSize) {
						allSpecEles.filter("[specid='"+spec+"']").removeClass("disabled");
					}
				});

				//- 供应商
				var object = {suppliers:suppliers};
				if(object.suppliers == null) {
					//console.log(null);
					$(".select .arrowBg").html("该商品暂无供应商");
					$(".toBuy").css("background","#ccc");
					$(".toBuy").html("该商品已下架");
					$('.toBuy').live('click', function(event) {  
						layer.msg("该商品已下架，请选择其他商品！");
					});
					$(".addCar").hide();
				}else{
					$(".selectList").html("")
					$(".select .arrowBg").html("请选择")
					$(".selectList").append(template("select", object));
					$(".toBuy").click(function(){
						buy();
					})
				}
			});
		}

		//- 点击购买
		function buy() {
			if($(".selectList").find("li").length == 0){
				layer.msg("该商品没有供应商，请选择其他商品!");
			}else if($(".select").find(".text").html() == "请选择"){
				layer.msg("请选择供应商!");
			}else{
				var specidArr = [];
				//- 获取规格文字
				var specidTxtArr = [];
				//- 获取规格标题
				var specidTitleArr = [];
				$("li[specid].selected").each(function() {
					specidArr.push($(this).attr("specid"));
					specidTxtArr.push($(this).closest("ul").prev().text());
					specidTitleArr.push($(this).children("a").text());
				});
				var specid = specidArr.join(",");
				//- var size = ($("input[name='width']").val() || "") + "x" 
				//- 		+ ($("input[name='height']").val() || "") + "x" 
				//- 		+ ($("input[name='thick']").val() || "") + "x"
				//- 		+ ($("select[name='unit']").val() || "");

				var number = $("input[name='number']").val();
				var price = $(".sale_price").html();
				//console.log(price);
				var companyArr = [];
				var src = $(".first").attr("src");
				var title = $(".rightContent h3").html();
				//console.log(ghsArr);
				//console.log(title);
				$("input[name='supplier']:checked").each(function() {
					companyArr.push($(this).val());
				});
				$.cookie("specidTxtArr",specidTxtArr.join(","))
				$.cookie("specidTitleArr",specidTitleArr.join(","))
				$.cookie("ghsName",$(".companyName").html())
				window.location.href="placeOrder_c.html?id="+thisRequest.id+"&specid="+specid+"&number="+number+"&price="+price+"&companies="+$(".companyName").attr("company_id")+"&src="+ src +"&title=" + title+"&sku_id="+$(".rightContent h3").attr("sku_id")+"&goods_id="+$(".goods").attr("good_id");
			}
		}
		//- 点击加入购物车
		function buy1() {
			if($(".selectList").find("li").length == 0){
				layer.msg("该商品没有供应商，请选择其他商品!");
			}else if($(".select").find(".text").html() == "请选择"){
				layer.msg("请选择供应商!");
			}else{
				var specidArr = [];
				//- 获取规格文字
				var specidTxtArr = [];
				//- 获取规格标题
				var specidTitleArr = [];
				$("li[specid].selected").each(function() {
					specidArr.push($(this).attr("specid"));
					specidTxtArr.push($(this).closest("ul").prev().text());
					specidTitleArr.push($(this).children("a").text());
				});
				//console.log(specidTitle);
				var specid = specidArr.join(",");
				var number = $("input[name='number']").val();
				var price = $(".sale_price").html();
				var companyArr = [];
				var src = $(".first").attr("src");
				var title = $(".rightContent h3").html();
				$.cookie("specidTxtArr",specidTxtArr.join(","))
				$.cookie("specidTitleArr",specidTitleArr.join(","))
				$.cookie("ghsName",$(".companyName").html())
				$("input[name='supplier']:checked").each(function() {
					companyArr.push($(this).val());
				});
				window.location.href="placeOrder_c1.html?id="+thisRequest.id+"&specid="+specid+"&number="+number+"&price="+price+"&companies="+$(".companyName").attr("company_id")+"&src="+ src +"&title=" + title+"&sku_id="+$(".rightContent h3").attr("sku_id")+"&goods_id="+$(".goods").attr("good_id");
				
			}
		}
		//- 将html转义
		function escape2Html(str) { 
			var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'}; 
			return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];}); 
		} 